<!doctype html>
<html class="h-full bg-gray-100">
    <head>
        <title>{% block title %}{% endblock %} ~ Semantic Image Search</title>
        <link
            href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
            rel="stylesheet"
        />
    </head>

    <body>
        <div class="flex min-h-screen flex-col">
            <header
                class="dark:bg-gray-850 border-b border-gray-200 bg-gray-100 dark:border-gray-800"
            >
                <div
                    class="mx-auto flex max-w-6xl items-center justify-between px-4 py-2 md:px-6 lg:px-8"
                >
                    <a
                        class="flex items-center gap-2 text-xl font-bold"
                        href="/"
                        ><svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="h-6 w-6"
                        >
                            <path
                                d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"
                            ></path>
                            <circle cx="12" cy="13" r="3"></circle>
                        </svg>
                        Image Search
                    </a>
                    <form
                        action="{{ url_for('text_query') }}"
                        method="get"
                        class="hidden w-full max-w-xs items-center gap-2 md:flex"
                    >
                        <input
                            class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full min-w-0 flex-1 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                            placeholder="Search"
                             name="text"
                            type="search"
                        /><button
                            class="ring-offset-background focus-visible:ring-ring bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                            type="submit"
                        >
                            Search
                        </button>
                    </form>
                    <a href="/random" title="Random image">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
                        </svg>

                    </a>
                </div>
            </header>
            <main class="flex-1">
                <div class="mx-auto max-w-6xl px-4 py-6 md:px-6 md:py-10">
                    <div class="grid gap-2 py-8">

                            {% block header %}{% endblock %}

                    </div>

                    <div>{% block content %}{% endblock %}</div>
                </div>
            </main>
        </div>

        {% block js %}{% endblock %}
    </body>
</html>
